import { State } from "./state";

export class TextualState extends State{
  getInnerHTML(){
    return `
      <div class="content mainContent">
        ${this.getMainContentHTML()}
      </div>
    `
  }

  getMainContentHTML(){
    return '';
  }

  getStateHeaderTitle(){
    return null;
  }

  getDefaultBackState(){
    return 'MainMenuState';
  }

  onBackButton(){
    if(this.backToStateId){
      this.moveToState(this.backToStateId, this.backToStatePayload);
    } else {
      this.moveToState(this.getDefaultBackState());
    }
  }

  internalGetFullHtml(){
    let headerHtml = '';
    if(this.getStateHeaderTitle()){
      headerHtml = `
        <div class="headerBar">
          <h1><button class="backButton"></button> ${this.getStateHeaderTitle()}</h1>
        </div>
      `
    }

    return `
      ${headerHtml}
      <div class="container">
        ${this.getInnerHTML()}
      </div>
    `
  }

  internalEnterCallback(payload){
    super.internalEnterCallback(payload, false);
    if(payload.backToStateId){
      this.backToStateId = payload.backToStateId;
      this.backToStatePayload = payload.backToStatePayload;
    }

    this.htmlElement.classList.add('textualState')
    if(this.getStateHeaderTitle()){
      this.htmlElement.classList.add('hasTitle')
    }

    this.headerElement = this.htmlElement.querySelector('.headerBar h1');

    if(this.headerElement){
      this.trackClicks(this.headerElement, this.onBackButton);
    }

    this.onEnter(payload);
  }
}